<template>
  <div id="app">
      <div id="left">
        <div class="logo">
          <el-image style="width: 70px; height: 70px" :src="logo" fit="fit"/>
          <p>电子健<br/>康卡系统</p>
        </div>
        <ul class="menu">
          <li :class="{'active':index===k}" v-for="(item,k) in silder" :key="k" @click="sildGo(item.router,k)">{{item.title}}</li>
        </ul>
        <div class="bottom">欢迎您：{{userName}}<b @click="exit">[登出]</b></div>
      </div>
    <router-view />
    </div>
  
</template>
<script>
export default {
  name: "left",
  data() {
    return {
      logo: require('../../static/logo.png'),
      silder:[
          {
              title:'健康卡数据监测',
              router:'/'
          },
          {
              title:'电子健康卡管理',
              router:'healthcreate'
          },
       
           {
            title:'医院数据监测',
              router:'hospitaldata'
          }
      ],
      userName:'管理员',
      index: 0
    };
  },
  mounted() {
    
  },
  methods: {
    sildGo(router,index) {
      this.index = index;
      this.$router.push(router)
    },
    exit() {
      this.$confirm("确定要退出该系统吗？", "提示", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
         
        })
        .catch(() => { });
    }
  },
  components: {},
  watch: {},
  props: {},
  computed: {}
};
</script>
<style scoped>
#app {
  background: none;
  background-color:#e5f1f4;
  flex-direction: row;
}

</style>